<template>
  <div class="my-order">
    <van-nav-bar
    :title="title"
    left-arrow
    @click-left="$router.go(-1)"
    />
    <van-tabs v-model="active">
      <van-tab title="全部">
        <first-order :image="image"></first-order>
      </van-tab>
      <van-tab title="待付款">
        <second-order :image="image"></second-order>
      </van-tab>
      <van-tab title="待收货">
        <third-order :image="image"></third-order>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import FirstOrder from './components/firstorder.vue'
import SecondOrder from './components/secondorder.vue'
import ThirdOrder from './components/thirdorder.vue'
import image from '@/assets/empty1.png'
export default {
  name: 'MyOrder',
  components: {
    FirstOrder,
    SecondOrder,
    ThirdOrder
  },
  data () {
    return {
      active: this.$route.query.type,
      image,
      title: '我的订单'
    }
  },
  watch: {
    active: {
      immediate: true,
      handler () {
        switch (this.active) {
          case 0:
            this.title = '我的订单'
            break
          case 1:
            this.title = '待支付订单'
            break
          case 2:
            this.title = '待收货订单'
            break
          default: this.title = '我的订单'
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.my-order {
}
</style>
